<template>
    <view class="pages" :class="GlobalThemes.backGroundColor">
        <view class="search-top-box" id="navbar">
            <u-navbar
                back-icon-color="#ffffff"
                :is-back="true"
                :border-bottom="false"
                :background="typelist[tabIndex].background"
            >
                <view class="mp-name">
                    <text>{{ i18n('index').appName }}</text>
                </view>
            </u-navbar>
        </view>
        <!-- #ifdef APP-PLUS -->
        <view class="cu-bar  solid-bottom" @click="changePsw">
            <view class="action fl nav-arrow">
                <text class="cuIcon-safe"></text>
                {{ i18n('user').changePassWord }}
            </view>
            <view class="fr"><text class="text-grey text-sm video-more-text"></text></view>
        </view>
        <!-- #endif -->

        <!-- #ifdef MP -->
        <view class="cu-bar  solid-bottom" @click="showAvatarModel">
            <view class="action fl nav-arrow">
                <text class="cuIcon-friendfamous"></text>
                头像
            </view>
            <view class="fr"><text class="text-grey text-sm video-more-text"></text></view>
        </view>
        <view class="cu-bar  solid-bottom" @click="showBindModel">
            <view class="action fl nav-arrow">
                <text class="cuIcon-friendfamous"></text>
                昵称
            </view>
            <view class="fr"><text class="text-grey text-sm video-more-text"></text></view>
        </view>
        <!-- #endif -->

        <view v-if="isShowGift" class="cu-bar  solid-bottom" @click="giftCode">
            <view class="action fl nav-arrow">
                <text class="cuIcon-ticket"></text>
                {{ i18n('user').giftCode }}
            </view>
            <view class="fr"><text class="text-grey text-sm video-more-text"></text></view>
        </view>

        <!-- #ifdef MP-WEIXIN -->
        <!-- 广告 -->
        <Adview v-if="adSwitchKg" :adSwitchKg="adSwitchKg" :homeADList="oneAd"></Adview>
        <!-- #endif -->

        <u-modal
            v-model="bindModel"
            ref="bindModal"
            @confirm="bindUsername"
            title="输入用户名"
            :show-cancel-button="true"
            confirm-text="提交"
            cancel-text="暂时不用"
            :title-style="{ textAlign: 'left', paddingLeft: '30rpx' }"
            :async-close="true"
        >
            <view class="model-box">
                <view class="slot-content">
                    <u-input
                        v-model="username"
                        placeholder="填写一个独一无二的用户名"
                        type="text"
                        :border="false"
                    />
                </view>
                <view class="slot-tips">
                    <text>
                        提示：该用户名用做找回帐号使用，建议尽快填写绑定，用户名可使用字母、数字、汉字或混合使用
                    </text>
                </view>
            </view>
        </u-modal>
        <u-modal
            v-model="avatarModel"
            ref="avatarModel"
            @confirm="changeAvatar"
            title="选择头像"
            :show-cancel-button="false"
            confirm-text="提交"
            :title-style="{ textAlign: 'left', paddingLeft: '30rpx' }"
            :async-close="true"
        >
            <view class="model-box">
                <button
                    class="avatar-wrapper"
                    open-type="chooseAvatar"
                    @chooseavatar="onChooseAvatar"
                >
                    <image class="avatar" :src="avatarUrl"></image>
                </button>
            </view>
        </u-modal>
    </view>
</template>

<script>
const MyApp = getApp();
const globalData = MyApp.globalData;
import Adview from '@/components/home-ad/ad-view.vue';
export default {
    components: {
        Adview
    },
    data() {
        return {
            adSwitchKg: globalData.adSwitchKg || uni.getStorageSync('sys_config').ad_switch,
            oneAd: MyApp.getOneAd('alert_public'),
            tabIndex: 0,
            typelist: globalData.typelist,
            tarbarObj: globalData.tarbarObj,
            homeADList: null,
            isShowxx: 0,
            isShowGift: 1,
            bindModel: false,
            avatarModel: false,
            isBindShow: 0,
            username: '',
            avatarUrl:
                'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
        };
    },
    computed: {
        i18n() {
            return globalData.$t;
        }
    },
    onShow() {
        let _this = this;
        _this.tabIndex = uni.getStorageSync('tabIndex') || 0;
        let config = uni.getStorageSync('sys_config');
        this.isShowxx = config.show_xx;
        this.isShowGift = config.gift_switch;
        this.isBindShow = config.userinfo.has_bind || 0;
    },
    onReady() {
        let config = uni.getStorageSync('sys_config');
        this.adSwitchKg = config.ad_switch;
        if (!this.homeADList && this.adSwitchKg) {
            let adList = uni.getStorageSync('home_ad');
            if (adList.length > 0) {
                let num = parseInt(Math.random() * (adList.length - 1), 10);
                this.homeADList = adList[num];
            }
        }
        let userInfo = uni.getStorageSync('userInfo');
        this.avatarUrl = userInfo
            ? userInfo.avatar
            : 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132';
    },
    methods: {
        changeUsi() {
            uni.navigateTo({
                url: '/packageA/pages/user/child/changeUsi'
            });
        },
        changePsw() {
            uni.navigateTo({
                url: '/packageA/pages/user/child/changePsw'
            });
        },
        giftCode() {
            uni.navigateTo({
                url: '/packageA/pages/user/child/giftCode'
            });
        },
        bindUsername() {
            let _this = this;
            _this.$http
                .post('/user/user/bindUser', {
                    username: _this.username
                })
                .then(res => {
                    _this.$u.toast(res.msg || '完成');
                    _this.$refs.bindModal.clearLoading();
                    if (res.code == 200) {
                        _this.bindModel = false;
                        _this.isBindShow = 1;
                    }
                });
        },
        onChooseAvatar(e){
            const { avatarUrl } = e.detail;
            this.avatarUrl = avatarUrl;
            let userInfo = uni.getStorageSync('userInfo');
            userInfo.avatar = avatarUrl;
            uni.setStorageSync('userInfo', userInfo);
        },
        changeAvatar() {
            let _this = this;
            _this.$http
                .post('/user/user/changeAvatar', {
                    avatar: _this.avatarUrl
                })
                .then(res => {
                    _this.$u.toast(res.msg || '完成');
                    _this.$refs.avatarModel.clearLoading();
                    if (res.code == 200) {
                        _this.avatarModel = false;
                    }
                });
        },
        showBindModel() {
            this.bindModel = !this.bindModel;
        },
        showAvatarModel() {
            this.avatarModel = !this.avatarModel;
        }
    }
};
</script>

<style lang="scss" scoped>
.model-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 30upx;
}
.slot-content {
}
.slot-tips text {
    font-size: 22upx;
    color: #707070;
    padding: 30upx 0;
}
.avatar-wrapper::after {
    border: none;
    background-color: #ffffff;
}
.avatar {
    width: 100px;
    height: 100px;
    z-index: 1;
}
</style>
